<template>
	<view>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-white" slot="content">开课</block>
		</cu-custom>
		<view>
			<scroll-view
				v-show="cardCur==0"
				scroll-y="true"
				class="item absolute left0 bottom0">
				<view class="bg-white">
					<view class="padding solid-bottom flex justify-between">
						<view class="text-pink text-lg text-bold title">
							<text>第一步：选择门店房间</text>
						</view>
						
					</view>
					
					<view class="cu-form-group ">
						<view class="title">选择门店：</view>
						<view class="flex justify-end align-center">
							<zqs-select 
								@change="mdChange"
								value-key="storeid" label-key="sname" title="选择门店" 
								:list="mds" v-model="astore.storeid"></zqs-select>
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title">选择房间：</view>
						<view class="flex justify-end align-center">
							<zqs-select 
								value-key="roomid" label-key="rname" title="选择房间" 
								:list="fjs" v-model="aroom.roomid"></zqs-select>
						</view>
					</view>
				</view>
				<view class="padding">
					<button @tap="next()" class="cu-btn block bg-pink">下一步</button>
				</view>
			</scroll-view>
			<scroll-view
				v-show="cardCur==1"
				scroll-y="true"
				class="item absolute left0 bottom0">
				<view class="bg-white">
					<view class="padding solid-bottom flex justify-between">
						<view class="text-pink text-bold text-lg title">
							<text>第二步：选择日期时间</text>
						</view>
						
					</view>
					<view class="margin-top">
						<view class="cu-form-group">
							<view class="title">期间</view>
							<view @click="openDate" class="bg-white select ">
								<text v-if="dateOption.isRange">
									<text>{{dateOption.sd}}</text>
									<text>~</text>
									<text>{{dateOption.ed}}</text>
								</text>
								<text v-else>{{dateOption.cd}}</text>
							</view>
						</view>
						<view>
							<yyjl-dates @datesChange="datesChange" :dateYyjl="dates" />
						</view>
						<xiaomiaogu-good-date-picker ref="goodDatePicker" @change="changeDate" :option="dateOption">
							
						</xiaomiaogu-good-date-picker>
					</view>
					<view class="padding flex justify-between align-center">
						<button @tap="before()" class="cu-btn block bg-pink w-40">上一步</button>
						<button @tap="next()" class="cu-btn block bg-pink w-40">下一步</button>
					</view>
				</view>
			</scroll-view>
			<scroll-view
				v-show="cardCur==2"
				scroll-y="true"
				class="item absolute left0 bottom0">
				<view class="bg-white">
					<view class="padding solid-bottom flex justify-between">
						<view class="text-pink text-bold text-lg title">
							<text>第三步：填写课程基本信息</text>
						</view>
						
					</view>
					<view>
						<view class="solid-bottom">
							<view class="cu-form-group">
								<view class="text-gray title">课程名</view>
								<input class="text-right" v-model="akecheng.kcname" placeholder="请输入课程名" />
								<text class="cuIcon-right text-gray"></text>
							</view>
						</view>
						<view class="solid-bottom">
							<view class="cu-form-group">
								<view class="text-gray title">最小人数</view>
								<input class="text-right" v-model="akecheng.zxrs" placeholder="请输入最小人数" />
								<text class="cuIcon-right text-gray"></text>
							</view>
						</view>
						<view class="solid-bottom">
							<view class="cu-form-group">
								<view class="text-gray title">价格</view>
								<input class="text-right" v-model="akecheng.price" placeholder="请输入价格" />
								<text class="cuIcon-right text-gray"></text>
							</view>
						</view>
						<view class="solid-bottom">
							<view class="cu-form-group">
								<view class="text-gray title">最大人数</view>
								<input class="text-right" v-model="akecheng.zdrs" placeholder="请输入最大人数" />
								<text class="cuIcon-right text-gray"></text>
							</view>
						</view>
						<view class="solid-bottom">
							<view class="cu-form-group">
								<view class="text-gray title">课程类型</view>
								<ba-tree-picker ref="treePicker" :multiple='false'
									@select-change="selectChange" title="选择类型" :localdata="akechenglxs" valueKey="akclxid"
									textKey="lxname" childrenKey="subs" />
								<view class="text-right text-gray" @tap="showPicker">
									<text>{{akecheng.lxname}}</text>
									<text class="cuIcon-right "></text>
								</view>
								
							</view>
						</view>
						<view class="margin-top">
							<cover-update v-model="akecheng.cover" :idKey="'kc'+new Date().getTime()" />
						</view>
						<view class="bg-white margin-top-sm">
							<view class="padding solid-bottom flex justify-start">
								<view class="text-gray title">
									<text>描述（图文组合）</text>
								</view>
							</view>
						
							<view class="padding-sm">
								<simple-editor action="https://api.xxx.xxx/upload" v-model="akecheng.ms"
									:uploadSuccess="editorUploadSuccess" :btns="['text', 'image']"></simple-editor>
							</view>
						</view>
					</view>
					<view class="padding flex justify-between align-center">
						<button @tap="before()" class="cu-btn block bg-pink w-40">上一步</button>
						<button @tap="next()" class="cu-btn block bg-pink w-40">下一步</button>
					</view>
				</view>
			</scroll-view>
			<scroll-view
				v-show="cardCur==3"
				scroll-y="true"
				class="item absolute left0 bottom0">
				<view>
					<view class="bg-white">
						<view class="padding solid-bottom flex justify-between">
							<view class="text-pink text-bold text-lg title">
								<text>第四步：填写课程章节信息</text>
							</view>
							
						</view>
					
						<view class="bg-white">
							<view class="padding-sm" v-for="(kcitem, index) in akechengitems" :key="index">
								<view class="shadow bg-white padding-sm relative">
									<view class="absolute top0 right0">
										<text @tap="removeKcitem(index)" 
											class="cuIcon-deletefill text-red"></text>
									</view>
									<view class="padding-sm flex justify-start align-center">
										<text class="cuIcon-text">内容：</text>
										<input class="solid" placeholder="请输入章节内容" v-model="kcitem.itemname" />
									</view>
									<view class="padding-sm">
										<text class="cuIcon-calendar">时段：</text>
										<text class="margin-right-xs">{{kcitem.dt}}</text>
										<text class="margin-right-xs">{{kcitem.st}}</text>
										<text class="margin-right-xs">{{kcitem.et}}</text>
									</view>
									
								</view>
							</view>
						</view>
					</view>
					<view class="padding flex justify-between align-center">
						<button @tap="before()" class="cu-btn block bg-pink w-40">上一步</button>
						<button @tap="kaike()" class="cu-btn block bg-pink w-40">开课</button>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		
		<!-- <swiper class="screen-swiper item" 
			@change="cardSwiper"
			:indicator-dots="false" :circular="false" :autoplay="false">
			<swiper-item class="relative item" :key="0" :class="cardCur==0?'cur':''">
				
			</swiper-item>
			
			<swiper-item class="relative item" :key="1" :class="cardCur==1?'cur':''">
				
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import yyjlBydatesVue from '../yy/yyjlBydates.vue';
	export default {
		components: {
			"yyjl-dates": yyjlBydatesVue
		},
		data: function() {
			return {
				cardCur: 0,
				astore: {
					storeid: "",
				},
				mds: [],
				aroom: {
					roomid: "",
				},
				fjs: [],
				dateOption: {
					isRange: true,
					isModal: true,
					isShowSubmit: false,
					sd: "选择开始日期",
					ed: "选择结束日期",
					dateNum: 0,
					cd: "选择日期"
				},
				aroomyyjl: {
					rmorderid: "",
					jlid: this.store.state.jl.jlid,
					roomid: "",
					storeid: "",
					amont: 0,
					pflg: false,
					tflg: "P"
				},
				aroomyyjlitems: [],
				yyjls: [],
				checkedDates: {},
				dates: {
					
				},
				akecheng: {
					kcid: "",
					kcname: "",
					jlid: this.store.state.jl.jlid,
					zxrs: "",
					zdrs: "",
					ybrs: "",
					price: "",
					ms: "",
					cs: 0,
					st: "",
					et: "",
					kclxid: "",
					lxname: "请选择课程类型",
					zt: "B",
					cover: "",
				},
				akechengitems: [],
				akechenglxs: [],
			};
		},
		onLoad: function(option) {
			this.init(option);
		},
		methods: {
			before: function() {
				this.cardCur--;
			},
			next: function() {
				
				if (this.cardCur == 0) {
					if (this.aroom.roomid == "") {
						this.message.error("请选择房间");
						return;
					}
					this.cardCur++;
				} else if (this.cardCur == 1) {
					if (this.aroomyyjlitems.length == 0) {
						this.message.error("请选择时段");
						return;
					}
					this.payYy().then(() => {
						this.cardCur++;
					});
					// if (this.aroomyyjl.rmorderid) {
					// 	this.api("/yy/info/get").send({
					// 		rmorderid: this.aroomyyjl.rmorderid
					// 	}).then(data => {
					// 		this.aroomyyjl = data.aroomyyjl;
					// 		if (this.aroomyyjl.tflg == "U" && this.aroomyyjl.prepaydata) {
					// 			this.pay.exePay(JSON.parse(this.aroomyyjl.prepaydata)).then(data => {
					// 				this.message.info("预约成功");
					// 				this.cardCur++;
					// 			});
					// 		} else {
					// 			this.aroomyyjl.rmorderid = "";
					// 			this.payYy().then(() => {
					// 				this.cardCur++;
					// 			});
					// 		}
							
					// 	}).catch(err => {
					// 		this.aroomyyjl.rmorderid = "";
					// 		this.payYy().then(() => {
					// 			this.cardCur++;
					// 		});
					// 	});
					// } else {
						
					// }
					
				} else if (this.cardCur == 2) {
					if (!this.akecheng.kcname) {
						this.message.error("请填写课程名");
						return;
					}
					
					if (!this.akecheng.zxrs) {
						this.message.error("请填写最小人数");
						return;
					}
					
					if (!this.akecheng.price) {
						this.message.error("请填写课程价格");
						return;
					}
					
					if (!this.akecheng.kclxid) {
						this.message.error("请选择课程类型");
						return;
					}
					
					if (!this.akecheng.cover) {
						this.message.error("请上传课程封面");
						return;
					}
					
					if (!this.akecheng.ms) {
						this.message.error("请填写课程介绍");
						return;
					}
					
					this.initKcItems();
					this.cardCur++;
				}
				
				
				
			},
			init: function(option) {
				this.loadMds(option);
				this.loadKclxs();
			},
			loadMds: function(option) {
				this.mds = this.constant.mds;
				console.log(this.mds);
				if (option.storeid) {
					this.astore.storeid = option.storeid;
					this.astore.roomid = option.roomid;
					this.mdChange(this.astore);
				}
			},
			mdChange: function(e) {
				this.fjs = [];
				this.aroom.roomid = "";
				this.api("/room/list").send({
					storeid: e.storeid,
					jyms: "SD"
				}).then(data => {
					if (e.roomid) {
						this.aroom.roomid = e.roomid;
					}
					this.fjs = data.arooms;
				});
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current;
			},
			openDate: function() {
				this.$refs.goodDatePicker.open();
			},
			changeDate: function(e) { //选择完日期回调
				if (e.currentDate) {
					this.dateOption.cd = e.currentDate; //单选模式下返回当前选择的日期
					this.dateOption.sd = e.currentDate; //区间选择模式下返回当前选择的开始日期
					this.dateOption.ed = e.currentDate; //区间选择模式下返回当前选择的结束日期
				} else {
					this.dateOption.cd = e.currentDate; //单选模式下返回当前选择的日期
					this.dateOption.sd = e.startDate; //区间选择模式下返回当前选择的开始日期
					this.dateOption.ed = e.endDate; //区间选择模式下返回当前选择的结束日期
				}

				this.dateOption.dateNum = e.dateNum; //区间选择模式下返回的开始于结束日期的天数
				
				this.api("/yy/range/date").send({
					roomid: this.aroom.roomid,
					cds: this.dateOption.sd,
					cde: this.dateOption.ed
				}).then(data => {
					this.dates = data.aa;
				});
				
			},
			datesChange: function(yyjls) {
				this.aroomyyjlitems = [];
				this.yyjls = yyjls;
				this.aroomyyjl.amont = 0;
				for (let key in yyjls) {
					let item = yyjls[key];
					this.aroomyyjlitems.push({
						itemid: item.aroomhourlyprices.hid+item.cd.replaceAll("-", ""),
						rmorderid: "",
						cd: item.cd,
						st: item.aroomhourlyprices.st,
						et: item.aroomhourlyprices.et,
						roomid: this.aroom.roomid,
						storeid: this.astore.storeid,
						hid: item.aroomhourlyprices.hid,
						price: item.aroomhourlyprices.price,
						statu: "U"
					});
					this.aroomyyjl.amont = this.aroomyyjl.amont + item.aroomhourlyprices.price;
				}
				console.log(this.aroomyyjlitems);
			},
			loadKclxs: function() {
				this.api("/kc/lx/tree").send({
				}).then(data => {
					this.akechenglxs = data.akechenglxs;
				});
			},
			selectChange: function(ids, names) {
				this.akecheng.kclxid = ids[0];
				this.akecheng.lxname = names;
			},
			showPicker: function() {
				this.$refs.treePicker._show();
			},
			initKcItems: function() {
				this.akechengitems = [];
				for (let index in this.aroomyyjlitems) {
					let yyjlitem = this.aroomyyjlitems[index];
					yyjlitem.kcitemid = this.common.generateID("KCIT");
					this.akechengitems.push({
						kcitemid: yyjlitem.kcitemid,
						itemname: "",
						kcid: "",
						dt: yyjlitem.cd,
						st: yyjlitem.st,
						et: yyjlitem.et,
						rmsyid: yyjlitem.itemid,
						roomid: yyjlitem.roomid,
						storeid: yyjlitem.storeid,
						rname: yyjlitem.rname,
						sname: yyjlitem.sname,
					});
				}
				// this.api("/yy/item").send({
				// 	jlid: this.store.state.jl.jlid,
				// 	kcitemid: "null",
				// 	tflg: "P",
				// 	pflg: true,
				// 	sd: this.dateOption.sd,
				// 	ed: this.dateOption.ed,
				// }).then(data => {
				// 	this.aroomyyjlitems = data.aroomyyjlitems;
				// 	for (let index in this.aroomyyjlitems) {
				// 		let yyjlitem = this.aroomyyjlitems[index];
						
				// 		this.akechengitems.push({
				// 			kcitemid: "",
				// 			itemname: "",
				// 			kcid: "",
				// 			dt: yyjlitem.cd,
				// 			st: yyjlitem.st,
				// 			et: yyjlitem.et,
				// 			rmsyid: yyjlitem.itemid,
				// 			roomid: yyjlitem.roomid,
				// 			storeid: yyjlitem.storeid,
				// 			rname: yyjlitem.rname,
				// 			sname: yyjlitem.sname,
				// 		});
				// 	}
				// });
			},
			
			payYy: function() {
				return new Promise((res,rej) => {
					this.aroomyyjl.roomid = this.aroom.roomid;
					this.aroomyyjl.storeid = this.astore.storeid;
					res();
					// this.api("/yy/info").send({
					// 	roomid: this.aroom.roomid,
					// 	storeid: this.astore.storeid,
					// 	jlid: this.aroomyyjl.jlid,
					// 	yyjls: this.yyjls
					// }).then(data => {
					// 	this.aroomyyjl = data.aroomyyjl;
					// 	this.aroomyyjlitems = data.aroomyyjlitems;
					// 	this.pay.exePay(JSON.parse(this.aroomyyjl.prepaydata)).then(data => {
					// 		this.message.info("预约成功");
					// 		res();
					// 	});
					// });
				});
			},
			
			
			kaike: function() {
				this.aroomyyjl.roomid = this.aroom.roomid;
				this.aroomyyjl.storeid = this.astore.storeid;

				this.api("/kc/kaike").send({
					aroomyyjl: this.aroomyyjl,
					aroomyyjlitems: this.aroomyyjlitems,
					akecheng: this.akecheng,
					akechengitems: this.akechengitems
				}).then(data => {
					this.aroomyyjl = data.aroomyyjl;
					if (this.aroomyyjl.pflg) {
						this.message.confirm({
							content: "开课成功",
							showCancel: false,
							complete: () => {
								uni.navigateBack();
							}
						});
					} else {
						this.pay.exePay(JSON.parse(this.aroomyyjl.prepaydata)).then(data => {
							this.message.confirm({
								content: "开课成功",
								showCancel: false,
								complete: () => {
									uni.navigateBack();
								}
							});
						});
					}
					
					
					
					
				});
			}
		}
	}
</script>

<style scoped>
	.item {
		width: 100vw;
		height: calc(100vh - 87px);
	}
</style>